<template>
	<u-navbar :is-back="false" :is-fixed="true" :background="{background:'#ffffff'}" :border-bottom="false">
		<view class="u-flex top-box">
			<image src="/static/images/logo.png" mode="aspectFill" class="logo-img"></image>
			<view class="u-flex-1">
				<u-search bg-color="#F6F6F6" :show-action="false" placeholder="请输入关键词" disabled
					@click="searchClick"></u-search>
			</view>
		</view>
	</u-navbar>
	<view class="u-skeleton">
		<view class="swiper-box u-skeleton-rect">
			<u-swiper :list="swiperList" mode="rect" height="384" :autoplay="true" border-radius="0"
				indicator-pos="bottomRight"></u-swiper>
		</view>
		<view class="u-flex u-p-28 bgw box-radius u-m-l-28 u-m-r-28 u-rela" :style="{'marginTop':skeletonLoading?'0':'-28upx'}">
			<template v-for="(v,i) in menus" :key="v.title">
				<view class="u-flex-1 u-text-center" @click="nav(v.path)">
					<view class="menu-image-wrap u-skeleton-circle">
						<image :src="v.icon" mode="aspectFit"></image>
					</view>
					<view class="u-m-t-12 u-m-l-4 u-m-r-4 u-skeleton-fillet">
						<text class="">{{v.title}}</text>
					</view>
				</view>
			</template>
		</view>
		<view class="u-p-20" v-if="list.length">
			<u-row gutter="22">
				<u-col span="6" v-for="v in list">
					<good-item :detail="v"></good-item>
					<u-gap height="20"></u-gap>
				</u-col>
			</u-row>
		</view>
		<view class="u-p-20" v-if="skeletonList.length">
			<u-row gutter="22">
				<u-col span="6" v-for="v in skeletonList">
					<view class="good-item">
						<view class="good-item-img-wrap u-skeleton-fillet">
							<image src="/static/images/icon-index-list.png" mode="aspectFill"></image>
						</view>
						<view class="u-p-20">
							<view class=" u-skeleton-rect">标题</view>
							<u-gap height="10"></u-gap>
							<text class="u-skeleton-rect">￥11111</text>
						</view>
					</view>
					<u-gap height="20"></u-gap>
				</u-col>
			</u-row>
		</view>
		<g-loadmore :status="loadmoreStatus"></g-loadmore>
		<u-gap height="20"></u-gap>
	</view>
	<u-skeleton :loading="skeletonLoading" :animation="true" bgColor="#F9F9F9"></u-skeleton>
</template>

<script setup>
	import store from '@/store/index.js'; //需要引入store

	import {
		ref,
		reactive,
		computed,
		getCurrentInstance,
		watch
	} from 'vue'
	const {
		proxy,
	} = getCurrentInstance()
	const {
		baseImgUrl
	} = proxy;
	const {
		nav,
		navLogin
	} = proxy.$util;
	import {
		onReady,
		onLoad,
		onShow,
		onPageScroll,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import mixins from '@/common/js/mixins.js';
	const {
		shareAppMessage
	} = mixins();
	import mixinList from '@/common/js/mixinList.js';
	const {
		total,
		current_page,
		page_size,
		last_page,
		apiPath,
		loading,
		list,
		searchParams,
		getList,
		getNextList,
		loadmoreStatus,
		searchClear,
		searchConfirm
	} = mixinList();
	const props = defineProps({
		code: {
			type: [String, Number],
			default: '',
		}
	})
	console.log(props.code);

	const skeletonLoading = ref(true)
	const skeletonList = ref([1, 2,])
	watch(loadmoreStatus, (newV) => {
		if (newV != 'loading') {
			skeletonLoading.value = false;
			skeletonList.value = []
		}
	})
	const menus = reactive([{
			title: '报单区',
			icon: '/static/images/icon-index-list.png',
			path: '/pages/list/list'
		},
		{
			title: '消费商城',
			icon: '/static/images/icon-index-mall.png',
			path: '/pages/mall/mall'
		},
		{
			title: '公司介绍',
			icon: '/static/images/icon-index-company.png',
			path: '/pagesSub/articleDetail/articleDetail?type=7'
		},
		{
			title: '邀请朋友',
			icon: '/static/images/icon-index-share.png',
			path: '/pages/share/share'
		}
	])

	apiPath.value = 'getProduct'
	searchParams.type = 0
	searchParams.productStatus = 1
	const searchClick = () => {
		nav('/pages/search/search')
	}
	const swiperList = ref([])
	const getData = () => {	
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		proxy.$u.api.getBanner().then(res => {
			let {
				data,
				code,
				msg
			} = res;
			if (code == 200) {
				swiperList.value = data.map(v => {
					return {
						image: baseImgUrl + v.imagePath
					}
				})
			} else {
				uni.$u.toast(msg || '错误');
			}
		})
	}

	onReady(() => {
		console.log('onReady')
	})
	onLoad(async (d) => {
		console.log('onLoad', d)
		getData();
		getList(1);
		// #ifdef MP-WEIXIN
		// uni.showShareMenu({
		// 	menus: ['shareAppMessage', 'shareTimeline']
		// })
		// #endif
	})
	onShow(async () => {
		// store.commit('set_userRole', 'user')
	})
	onPageScroll(e => {

	})
</script>

<style scoped lang="scss">
	.top-box {
		display: flex;
		align-items: center;
		padding: 0 14px;
		width: 100%;

		.logo-img {
			width: 34px;
			height: 34px;
			margin-right: 14px;
			border-radius: 50%;
		}
	}

	.swiper-box {
		overflow: hidden;
	}

	.menu-image-wrap {
		width: 84upx;
		height: 84upx;
		margin: 0 auto;

		image {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
</style>